<template>
	<view class="w">
		<view class="authentication-info" :class="{'orange' : pageTheme == 'orange'}">
			<view class="form-section">
				<view class="form-title">01/填写基本信息</view>
				<view class="item">
					<view class="label">期数</view>
					<input class="set" type="text" value="仅支持36期" :disabled="true" />
				</view>
				<view class="item">
					<view class="label">单位性质</view>
					<picker mode="selector" :range="unitNatureArr" @change="unitNatureArrChange" range-key="name">
						<view class="set-box">
							<input type="text" class="set"
								:value="formItem.dwxz && unitNatureArr[formItem.dwxz - 1].name"
								placeholder="请选择您就职的单位性质" :disabled="true" />
							<image class="arrow" src="/static/arrow.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">职业</view>
					<picker mode="selector" :range="careerArr" @change="careerArrChange" range-key="name">
						<view class="set-box">
							<input type="text" class="set" :value="formItem.zhiye && careerArr[zhiyeIndex].name"
								placeholder="请选择您就职的单位性质" :disabled="true" />
							<image class="arrow" src="/static/arrow.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">常住地省市区</view>

					<view class="set-box" @click="openArea">
						<view type="set" placeholder='请输入地区' class="set"
							:class="{'uniActive': formItem.czdssq == '请选择常住地省市区'}" :disabled="true">
							{{ formItem.czdssq  }}
						</view>
						<image src="/static/login/arrow.png" class="get-code arrow"></image>
					</view>
				</view>

				<view class="item">
					<view class="label">详细地址</view>
					<input class="set" type="text" placeholder="请输入的常住详细地址" v-model="formItem.czdxxdz" />
				</view>

				<view class="item">
					<view class="label">意向申请额度</view>
					<input class="set" type="tel" placeholder="请输入意向申请额度" v-model="formItem.yxsqed" />
				</view>
			</view>

			<view class="form-section" style="margin-top: 20rpx;">
				<view class="form-title">02/上传身份证正反面照片</view>
				<view class="pic-box">
					<view class="pic-item" v-if="idCardUp">
						<image :src="idCardUp" class="b-pic" mode="aspectFill" @click="uploadIdCard('front')"></image>
						<view class="del-pic" @click.stop="idCardUp = ''">x</view>
					</view>
					<view v-else class="pic-item" @click="uploadIdCard('front')">
						<image src="../static/camera.png" class="icon"></image>
						<text>法人身份证人像面</text>
					</view>

					<view class="pic-item" v-if="idCardDown">
						<image :src="idCardDown" class="b-pic" mode="aspectFill" @click="uploadIdCard('back')"></image>
						<view class="del-pic" @click.stop="idCardDown = ''">x</view>
					</view>
					<view v-else class="pic-item" @click="uploadIdCard('back')">
						<image src="../static/camera.png" class="icon"></image>
						<text>法人身份证国徽面</text>
					</view>
				</view>
			</view>

			<view class="fixed-box">
				<view class="fixed-btn" @click="postIt">确认提交</view>
			</view>

			<view class="pop-section" v-if="showPop">
				<view class="pop-box">
					<image src="../static/delete.png" class="close" @click="showPop = false"></image>
					<image v-if="pageTheme == 'blue'" src="../static/success.png" class="success-pic"></image>
					<image v-if="pageTheme == 'orange'" src="../static/success-2.png" class="success-pic"></image>
					<view class="title">提交成功</view>
					<view class="sub">客服人员在24小时内致电与您联系</view>
					<view class="getIt" @click="showPop = false">我知道啦</view>
				</view>
			</view>

			<u-picker round="10" v-model="showArea" title="选择地址" ref="uPicker" @confirm="getAddress"
				@cancel="showArea=false" closeOnClickOverlay @close="showArea=false" mode="region"
				:params="{province: true,city: true,area: true}"></u-picker>
		</view>
	</view>
</template>

<script>
	import career from "@/common/dictionary/career.js"
	export default {
		data() {
			return {
				pageTheme: 'orange', // orange  blue
				showPop: false,
				idCardUp: '',
				idCardDown: '',

				showArea: false,
				formItem: {
					qs: 36,
					dwxz: undefined,
					zhiye: undefined,
					czdssq: '请选择常住地省市区',
					czdxxdz: undefined,
					yxsqed: undefined,
				},
				unitNatureArr: [{
						id: 1,
						name: '政府机关/事业单位'
					},
					{
						id: 2,
						name: '国营企业'
					},
					{
						id: 3,
						name: '个体经营/自由职业'
					},
					{
						id: 4,
						name: '民营企业'
					},
					{
						id: 5,
						name: '股份制公司'
					},
					{
						id: 6,
						name: '外资企业'
					},
					{
						id: 7,
						name: '军队'
					},
					{
						id: 8,
						name: '社会团体'
					},
					{
						id: 9,
						name: '其他'
					},
				],
				career,
				careerArr: [],
				zhiyeIndex: 0
			}
		},

		onLoad(options) {
			this.getChannel()

			this.formItem = uni.getStorageSync('loginObj')
			this.formItem = JSON.parse(this.formItem)
			console.log(this.formItem, 'this.formItem')

			if (this.formItem.idcardFrontUrl) {
				this.idCardDown = this.formItem.idcardFrontUrl
			}
			if (this.formItem.idcardBadUrl) {
				this.idCardUp = this.formItem.idcardBadUrl
			}

			this.formItem.qs = 36
			if (this.formItem.czdssq == '') {
				this.formItem.czdssq = '请选择常住地省市区'
			}


			let ci = 1
			for (var i in this.career) {
				this.careerArr.push({
					key: i,
					id: ci,
					name: this.career[i]
				})
				ci = ci + 1
			}
			console.log(this.careerArr)
		},
		methods: {
			uploadIdCard(type) {
				this.$common.uploadImageOne('wx/common/upload', (res) => {
					console.log(res)
					if (type == 'front') {
						this.idCardUp = res.url
					} else if (type == 'back') {
						this.idCardDown = res.url
					}
				});
			},
			postIt() {
				this.formItem.idcardFrontUrl = this.idCardDown
				this.formItem.idcardBadUrl = this.idCardUp

				if (this.formItem.yxsqed) {
					this.formItem.yxsqed = Math.abs(parseInt(this.formItem.yxsqed))
				}
				console.log(this.formItem, 'this.formItem')
				// return
				this.$request({
					url: '/ClientUserController/h5add',
					method: 'post',
					data: this.formItem
				}).then(res => {
					if (res.code == 200) {
						// this.idCardUp = ''
						// this.idCardDown = ''
						// this.showPop = true
						uni.navigateTo({
							url: '/pages/successPage'
						})
						uni.setStorageSync('loginObj', JSON.stringify(res.data))
					}
				})
			},

			unitNatureArrChange(e) {
				this.formItem.dwxz = this.unitNatureArr[e.detail.value].id
			},
			careerArrChange(e) {
				this.zhiyeIndex = e.detail.value
				this.formItem.zhiye = this.careerArr[e.detail.value].id
				this.$forceUpdate()
			},
			openArea() {
				this.showArea = true
			},
			getAddress(e) {
				console.log('选择的地址是', e);
				this.formItem.czdssq = e.province.label + ',' + e.city.label + ',' + e.area.label
				console.log(this.formItem.czdssq)
				//this.location = e
			},
			getChannel() {
				this.$request({
					url: 'ChannelController/appGetUiType',
					method: 'get',
					data: {
						channelId: this.formItem.channelId
					}
				}).then(res => {
					if (res.code == 200) {
						switch (res.data) { // 根据请求切换主题
							case 1:
								this.pageTheme = 'blue'
								break;
							case 2:
								this.pageTheme = 'orange'
								break;
							case 3:
								this.pageTheme = 'blue'
								break;
							case 4:
								this.pageTheme = 'blue'
								break;
						}
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F7FA;
	}

	.authentication-info {
		padding: 24rpx;
		padding-bottom: 180rpx;

		&.orange {
			.fixed-btn {
				background: #FF9147;
			}

			.pop-box .getIt {
				background: #FF9147;
			}
		}

		.form-section {
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.form-title {
				padding-bottom: 32rpx;
				border-bottom: 2rpx solid #F5F5F5;
				font-size: 32rpx;
				font-weight: bold;
				color: #292929;
				line-height: 32rpx;
			}

			.item {
				.label {
					margin-top: 32rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #292929;
					line-height: 28rpx;
				}

				.set-box {
					position: relative;

					.arrow {
						position: absolute;
						top: 50%;
						right: 24rpx;
						transform: translateY(-50%);
						width: 28rpx;
						height: 28rpx;
					}
				}

				.set {
					margin-top: 24rpx;
					padding: 0 24rpx;
					height: 92rpx;
					line-height: 92rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #F5F5F5;

					&.uniActive {
						color: #999;
					}
				}
			}

			.pic-box {
				display: flex;
				justify-content: space-between;
				padding-top: 32rpx;

				.pic-item {
					position: relative;
					width: 316rpx;
					height: 192rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx dashed #EBEBEB;
					text-align: center;
					overflow: hidden;

					.b-pic {
						width: 316rpx;
						height: 192rpx;
					}

					.del-pic {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 10;
						width: 48rpx;
						height: 48rpx;
						background: rgba(0, 0, 0, 0.4);
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						display: flex;
						justify-content: center;
						font-size: 40rpx;
						color: #fff;
						line-height: 1;
					}

					.icon {
						margin: 66rpx auto 8rpx auto;
						display: block;
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
					}
				}
			}
		}
	}

	.fixed-box {
		padding: 24rpx 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 10;
		background-color: #fff;
		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

		.fixed-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 96rpx;
			background: #297EFF;
			border-radius: 24rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;

			&.active {
				background: #fff;
			}
		}
	}

	.pop-section {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;

		.pop-box {
			position: relative;
			width: 654rpx;
			height: 532rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			text-align: center;
			padding-top: 48rpx;

			.title {
				margin-top: 40rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #292929;
				line-height: 36rpx;
				font-weight: bold;
			}

			.sub {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}

			.getIt {
				margin: 48rpx auto 0 auto;
				width: 494rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #297EFF;
				border-radius: 46rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.close {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				z-index: 2;
				width: 40rpx;
				height: 40rpx;
			}

			.success-pic {
				margin: 0 auto;
				width: 190rpx;
				height: 176rpx;
			}
		}
	}

	@media only screen and (min-width:750px) {
		.w {
			width: 1000px;
			margin: auto;
			.form-section{
				.pic-box{
					justify-content: space-around;
				}
			}
			

		}

		.fixed-box {
			width: 1000px;
			left: 24%;
			right: 0;
			bottom: 0;
		}
	}
</style>